<template>

  <el-card>
    <el-tabs v-model="activeName">
      <el-tab-pane label="项目详情" name="basic">
        <basic-info-form ref="basicInfoForm" :info="projectInfo" />
      </el-tab-pane>
      <el-tab-pane label="反馈详情" name="feedback">
        <div class="block">
        <!-- 搜索工作栏 -->
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="选择时间" prop="createTime">
            <el-date-picker v-model="queryParams.createTime" size="small" style="width: 240px" value-format="yyyy-MM-dd"
                            type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" />
          </el-form-item>
          <el-form-item label="选择分类" prop="maintainId">
            <el-cascader
              v-model="queryParams.maintainId"
              :props="{checkStrictly:true}" 
              :show-all-levels="true"
              :options="maintainOptions"
              @change="handleChange">
            </el-cascader>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        </div>
        <feedback :datas="items" />
      </el-tab-pane>
    </el-tabs>
    <el-form label-width="100px">
      <el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
        <el-button @click="close()">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>

import basicInfoForm from "./detail";
import feedback from "./feedback.vue";
import { get} from "@/api/fi/project";
import { getList } from "@/api/fi/coreTask/";
import { listTree } from "@/api/system/dict/data";
import { DICT_TYPE } from '@/utils/dict';

export default {
  name: "ProjectDetailTab",
  components: {
    basicInfoForm,
    feedback
  },
  data() {
    return {
      // 选中选项卡的 name
      activeName: "feedback",
      showSearch : true,
      // 表格的高度
      tableHeight: document.documentElement.scrollHeight - 245 + "px",
      // 详细信息
      projectInfo: {},
      queryParams : {
        createTime : null,
        projectId : null,
        maintainId : null
      },
      items : [],
      maintainOptions : []
    };
  },
  created() {
    const projectId = this.$route.params && this.$route.params.projectId;
    this.queryParams.projectId = projectId;
    this.getProjectInfo(projectId);
    this.getFeedBackList();
    this.getMaintainOptions();
  },
  methods: {
    //获取项目详情
    getProjectInfo(projectId){
      get(projectId).then(response => {
        this.projectInfo = response.data;
      });
    },
    getFeedBackList(){
      getList(this.queryParams).then(response => {
        this.items = response.data;
      });
    },
    /** 关闭按钮 */
    close() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({ path: "/fi/project", query: { t: Date.now()}})
    },
    handleChange(val){
      this.queryParams.maintainId = val[val.length-1];
      this.getFeedBackList();
    },
    getMaintainOptions(){
      const params = {
        dictType : DICT_TYPE.FI_PROJECT_FEEDBACK_TYPE
      }
      listTree(params).then(response => {
        this.maintainOptions = response.data;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getFeedBackList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }
};
</script>
